<template>
  <div class="home">
    <el-container>
      <!-- 侧边栏开始 -->
      <el-aside width="auto">
          <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            text-color="#b8c7ce"
            background-color="#222d32"
            unique-opened
            :collapse=isCollapse
            router
          >
            <div class="qtMenu" >
              <span class="iconfont icon-kaiguan"  @click="isCollapse = !isCollapse" ></span>
            </div>
            <el-menu-item index="/Dashboard">
                <i>
                  <svg class="icon qtIcon" aria-hidden="true">
                    <use xlink:href="#icon-yibiaopan"></use>
                  </svg>
                </i>
                 <template slot="title">
                <span>仪表盘</span>
                 </template>
            </el-menu-item>

            <el-submenu index="2">
              <template slot="title">
                <i>
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-zichanmingxi"></use>
                  </svg>
                </i>
                <span >资产列表</span>
              </template>
              <el-menu-item-group class="qtAssets">
                <!-- <template slot="title">全部列出</template> -->
                <el-menu-item index="hardware:1">全部列出</el-menu-item>
                <el-menu-item index="hardware:2">
                  <svg class="icon blue" aria-hidden="true">
                      <use xlink:href="#icon-yuan"></use>
                  </svg>
                  <span>使用中</span>
                  </el-menu-item>
                <el-menu-item index="hardware:3">
                   <svg class="icon green" aria-hidden="true">
                      <use xlink:href="#icon-yuan"></use>
                  </svg>
                  <span>未使用</span>
                </el-menu-item>
                <el-menu-item index="hardware:4">
                  <svg class="icon orange" aria-hidden="true">
                      <use xlink:href="#icon-yuan"></use>
                  </svg>
                  <span>未使用，可申请</span>
                  </el-menu-item>
                <el-menu-item index="hardware:5">
                  <svg class="icon orange" aria-hidden="true">
                      <use xlink:href="#icon-cha"></use>
                  </svg>
                  <span>故障，待维修</span>
                </el-menu-item>
                <el-menu-item index="hardware:6">
                  <svg class="icon orange" aria-hidden="true">
                      <use xlink:href="#icon-cha"></use>
                  </svg>
                  <span>故障，无法维修</span>
                  </el-menu-item>
                <el-menu-item index="hardware:7">
                  <svg class="icon orange" aria-hidden="true">
                      <use xlink:href="#icon-cha"></use>
                  </svg>
                  <span>报废</span>
                  </el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group class="qtAssetsRecord">
                  <el-menu-item index="1-8">资产维修列表</el-menu-item>
                  <el-menu-item index="1-9">资产删除列表</el-menu-item>
                  <el-menu-item index="1-10">资产申请列表</el-menu-item>
                  <el-menu-item index="1-11">资产盘点列表</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
           <el-menu-item index="components">
                <i>
                  <svg class="icon qtIcon" aria-hidden="true">
                    <use xlink:href="#icon-yingjianzhichi"></use>
                  </svg>
                </i>
                 <template slot="title">
                 <!-- <span class="iconfont icon-kaiguan"></span> -->
                <span>硬件</span>
              </template>
            </el-menu-item>
            <el-menu-item index="peripheral">
                <i>
                  <svg class="icon qtIcon" aria-hidden="true">
                    <use xlink:href="#icon-component"></use>
                  </svg>
                </i>
                 <template slot="title">
                 <!-- <span class="iconfont icon-kaiguan"></span> -->
                <span>外设</span>
              </template>
            </el-menu-item>
           <el-menu-item index="consumables">
                <i>
                  <svg class="icon qtIcon" aria-hidden="true">
                    <use xlink:href="#icon-haocai"></use>
                  </svg>
                </i>
              <template slot="title">
                <span>耗材</span>
              </template>
            </el-menu-item>
            <el-menu-item index="license">
                <i>
                  <svg class="icon qtIcon" aria-hidden="true">
                    <use xlink:href="#icon-xukezhengguanli"></use>
                  </svg>
                </i>
              <template slot="title">
                <span>软件许可证</span>
              </template>
            </el-menu-item>
            <el-menu-item index="users">
                <i>
                  <svg class="icon qtIcon" aria-hidden="true">
                    <use xlink:href="#icon-manager"></use>
                  </svg>
                </i>
              <template slot="title">
                <span>用户</span>
              </template>
            </el-menu-item>
             <!-- <el-menu-item index="7">
                <i>
                  <svg class="icon qtIcon" aria-hidden="true">
                    <use xlink:href="#icon-caiwuxinxi"></use>
                  </svg>
                </i>
              <template slot="title">
                <span>财务信息</span>
              </template>
            </el-menu-item> -->

             <!-- <el-menu-item index="8">
                <i>
                  <svg class="icon qtIcon" aria-hidden="true">
                    <use xlink:href="#icon-cog"></use>
                  </svg>
                </i>
              <template slot="title">
                <span>设置</span>
              </template>
            </el-menu-item> -->
               <el-submenu index="8">
              <template slot="title">
                <i>
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-cog"></use>
                  </svg>
                </i>
                <span >设置</span>
              </template>
              <el-menu-item-group class="qtAssetsRecord">
                  <el-menu-item index="categories">资产类型</el-menu-item>
                  <el-menu-item index="models">资产型号</el-menu-item>
                  <el-menu-item index="manufacturers">制造商</el-menu-item>
                  <el-menu-item index="suppliers">供应商</el-menu-item>
                  <el-menu-item index="companies">公司</el-menu-item>
                  <el-menu-item index="departments">部门</el-menu-item>
                  <el-menu-item index="depreciation">折旧</el-menu-item>
              </el-menu-item-group>
            </el-submenu>

            <el-menu-item index="Report">
                <i>
                  <svg class="icon qtIcon" aria-hidden="true">
                    <use xlink:href="#icon-baogao"></use>
                  </svg>
                </i>
              <template slot="title">
                <span>报告</span>
              </template>
            </el-menu-item>
          </el-menu>

      </el-aside>
      <!-- 侧边栏结束 -->
      <el-container>
        <el-header>
          <!-- background-color="#3c8dbc" -->
          <el-menu
            :default-active="activeIndex2"
            class="el-menu-demo qtNav"
            mode="horizontal"
            @select="handleSelect"
            background-color="#3c8dbc"
            text-color="#fff"
            router
          >
            <el-menu-item index="/" class="qtLogo">
              <router-link to>
                <img src="../assets/images/login/form_logo.png" alt>
                <span >快时资产管理系统</span>
              </router-link>
            </el-menu-item>
            <div class="qtNav">
             <el-menu-item index="hardware:1" >
               <i>
                  <svg class="icon qtIcon" aria-hidden="true">
                    <use xlink:href="#icon-zichanmingxi"></use>
                  </svg>
                </i>
             </el-menu-item>
             <el-menu-item index="components" >
               <i>
                  <svg class="icon qtIcon" aria-hidden="true">
                    <use xlink:href="#icon-yingjianzhichi"></use>
                  </svg>
                </i>
             </el-menu-item>
             <el-menu-item index="peripheral" >
               <i>
                  <svg class="icon qtIcon" aria-hidden="true">
                    <use xlink:href="#icon-component"></use>
                  </svg>
                </i>
             </el-menu-item>
             <el-menu-item index="consumables" >
               <i>
                  <svg class="icon qtIcon" aria-hidden="true">
                    <use xlink:href="#icon-haocai"></use>
                  </svg>
                </i>
             </el-menu-item>
             <el-menu-item index="license" >
               <i>
                  <svg class="icon qtIcon" aria-hidden="true">
                    <use xlink:href="#icon-xukezhengguanli"></use>
                  </svg>
                </i>
             </el-menu-item>
                <el-input  placeholder="快速搜索资产" class="qtSearchInput"></el-input>
                <el-button  icon="el-icon-search" class="qtSearchButton" circle></el-button>
            <el-submenu index="" class="qtManage">
              <template slot="title">{{username}}</template>
              <el-menu-item index="5-1">查看已分配的资产</el-menu-item>
              <el-menu-item index="5-2">编辑个人资料</el-menu-item>
              <el-menu-item index="password">更改密码</el-menu-item>
              <el-menu-item  index="" @click='Logout'>退出登录</el-menu-item>
            </el-submenu>
            </div>
          </el-menu>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import { logout } from '@/api/index.js'
export default {
  data () {
    return {
      activeIndex: '1',
      activeIndex2: '1',
      isCollapse: false,
      username: ''
    }
  },
  created () {
    let username = JSON.parse(localStorage.getItem('loginCode'))
    this.username = username
  },
  methods: {
    handleSelect (key, keyPath) {
      console.log(key, keyPath)
    },
    // 系统登出
    Logout () {
      // localStorage.removeItem('loginCode')
      this.$confirm('是否退出系统?', '退出系统', {
        confirmButtonText: '是',
        cancelButtonText: '否',
        type: 'warning'
      }).then(() => {
        logout().then(res => {
          if (res.data.success) {
            this.$message({
              type: 'success',
              message: '已退出系统'
            })
            // 跳转到登录页
            this.$router.push({ name: 'login' })
          } else {
            this.$message({
              type: 'error',
              message: '退出系统失败'
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-container {
  height: 100%;
  .el-header {
    text-align: center;
    line-height: 60px;
    ul {
      width: 100%;
      .el-menu-item {
        color: #fff;
      }
      .qtIcon {
        color: #fff;
        font-size: 16px;
      }
      .qtSearchInput.el-input {
        // display: inline-block;
        min-width: 200px;
        padding-right: 10px;
        .el-input__inner{
           border-radius: 20px !important;
        }
      }
      .qtSearchButton {
        height: 40px;
        margin-top:10px;
        width: 40px;
      }
      .qtNav {
        display: flex;
        // float: right;
        // padding-right: 20px;
        // flex-direction: row-reverse;
        justify-content: flex-end;
        li {
          height: 60px;
           }
        // .qtManage  {
        //     margin-right: 20px !important;
        //     .el-submenu__title{
        //       height: 60px !important;
        //       background-color: pink !important;
        //     }
        //   }
      }
    }
  }
  .el-aside {
    z-index: 999;
    text-align: center;
    line-height: 200px;
    overflow-y: hidden;
       .el-menu-vertical-demo:not(.el-menu--collapse) {
        height: 100%;
        width: 200px;
        border: 0;
        z-index:100;
      }
      .el-menu--collapse {
         height: 100%;
         border: 0;
         background-color: pink;
      }
      .qtMenu{
        position: relative;
        height: 61px;
        line-height: 61px;
        color: #fff;
        span{
          position: absolute;
          right: 10px;
          width: 48px;
          cursor: pointer;
          font-size: 14px;
          &:hover {
            background-color: #367fa9;
             border-radius: 5px;
          }
        }
      }
      .el-submenu,.el-menu-item{
        text-align: left;
        color: #fff;
        i{
          font-size: 15px;
        }
        span{
          font-size: 14px;
          padding-left: 10px;
        }
      }

      .qtAssets li {
        height: 30px;
        line-height: 30px;
        color: #8aa4af !important;
         border: 0;
        &:nth-of-type(1){
          padding-left: 20px !important;
        }
        &:hover {
          color: #fff !important;
          border: 0;
        }
      }
      .qtAssets .el-menu-item.is-active {
         color: #fff !important;
         background-color: rgb(27, 36, 40) !important;
     }
      .qtAssetsRecord li {
        height: 30px;
        line-height: 30px;
        color: #8aa4af !important;
        padding-left: 20px !important;
         &:hover,&:focus {
          color: #fff !important;
        }
      }
      .qtAssetsRecord .el-menu-item.is-active {
         color: #fff !important;
         background-color: rgb(27, 36, 40) !important;
     }

  }

  .el-main {
   background-color: #ecf0f5;
    color: #333;
    text-align: center;
    padding: 0;
  }

  body > .el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
    // height: 100%;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
}
.home {
  height: 100%;
  .qtNav {
    .qtLogo {
      height: 60px;
      line-height: 1;
      z-index: 100;
      a {
        font-size: 20px;
        img {
          display: inline-block;
          // width: 100%;
          line-height: 60px;
          height: 100%;
        }
        span {
          padding-left: 10px;
        }
      }
    }
    li {
      border-bottom: none;
    }
  }
}
</style>
